<template>
	<view class="content util-page-height">
		<view class="uni-flex uni-column uni-common-mt util-full-height util-flex-mian-center">
			<uni-popup ref="warnDialog" type="dialog">
				<uni-popup-dialog mode="base" :content="warnMessage" type="warn" @confirm="onWarnConfirmed"></uni-popup-dialog>
			</uni-popup>
			<view v-if="!hasActive" class="uni-center">
				<text>当前无队列信息<br>请点击下方按钮创建队列</text>
			</view>
			<view class="uni-flex uni-row uni-center header" v-if="hasActive">
				<text class="title">{{ community }}</text>
				<!-- <image class="qrcode" src="../../static/qrcode.png" @click="navigateToScan"></image> -->
			</view>
			<view v-if="hasActive" class="uni-flex uni-column util-flex-mian-center main">
				<view>
					<qrcode 
						:size="qrcode.size" 
						:value="qrcode.value" 
						:logo="qrcode.logo" 
						:bgColor="qrcode.bgColor" 
						:fgColor="qrcode.fgColor"
					></qrcode>
				</view>
				<view class="uni-flex uni-center position-title">
					<text class="position-text">当前位置</text>
				</view>
				<view class="uni-flex position-count">
					<text class="position-count-text">{{ current }}</text>
				</view>
				<view class="uni-row uni-center other-info">
					<text>本次共预约<span>{{ subscribe }}</span>人，</text>
					<text>剩余<span>{{ remind }}</span>人</text>
				</view>
			</view>
			<view class="uni-btn-v footer">
				<button v-if="hasActive" class="button" type="warn" @click="goScan">扫码销号</button>
				<button class="button" type="primary" @click="navigateToCreate">创建队列</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Qrcode from "qrcode-vue";
	import QrcodeLogo from "../../static/yunzhu2.jpg";
	export default {
		components: {
			Qrcode
		},
		data() {
			return {
				hasActive: false,
				community: "测试队列名称",
				current: -1,
				subscribe: -1,
				remind: -1,
				qrcode: {
					size: 100,
					bgColor: '#fff',
					fgColor: '#000',
					value: "",
					logo: QrcodeLogo,
				},
				warnMessage: "新队列成功创建时，将使当前队列失效。您是否确定继续创建？"
			}
		},
		async onLoad(option) {
			const qrresult = this.getScanResult("qrresult");
			if (qrresult) {
				const userId = this.getQueryVariable("userId", qrresult);
				const result = await this.$API.Community.scan(userId);
				if (result && result.success) {
					alert("销号成功");
				}
			}
			const communityId = this.$API.Community.getCommunityIdentifier();
			if (!communityId) {
				uni.navigateTo({ url: "./login" });
			} else {
				const listId = this.$API.Community.getListIdentifier();
				if (listId !== -1) {
					const result = await this.$API.Community.getDetail(listId);
					if (result && result.success) {
						this.hasActive = true;
						this.community = result.name;
						this.current = result.current;
						this.subscribe = result.subscribe;
						this.remind = result.remind;
						this.qrcode.value = result.qrcode;
						// this.qrcode.value = `http://192.168.3.10:8080/#/pages/user/index?listId=${result.id}`;
					} else {
						this.hasActive = false;
					}
				}
			}
		},
		methods: {
			navigateToCreate() {
				if (this.hasActive) {
					this.openWarnDialog();
				} else {
					uni.navigateTo({ url: "./create" });
				}
			},
			goScan() {
				const originalHref = window.location.href;
				let href = originalHref;
				if (originalHref.indexOf('?') !== -1) {
					href = originalHref.split('?')[0];
				}
				location.href = `http://sao315.com/w/api/saoyisao?redirect_uri=${ encodeURIComponent(href) }`;
			},
			getScanResult(name) {
				var reg = new RegExp("\\b" + name + "=([^&]*)");
				var r = window.location.href.match(reg);
				if (r !== null) {
					return decodeURIComponent(r[1]);
				}
			},
			getQueryVariable(varible, href) {
				if (!href) {
					href = window.location.href;
				}
				const startIndex = href.indexOf("?");
				if (startIndex > -1) {
					const queries = href.slice(startIndex + 1).split("=");
					if (queries && queries.length > 0) {
						if (queries[0] === varible) {
							return queries[1];
						}
					}
				}
			},
			openWarnDialog() {
				this.$refs.warnDialog.open("center");
			},
			onWarnConfirmed() {
				uni.navigateTo({ url: "./create" });
			}
			// navigateToScan() {
			// 	uni.navigateTo({
			// 		url: "./scan",
			// 		success: res => {
			// 			res.eventChannel.emit('acceptDataFromOpenerPage', { data: { community: this.community, qrcode: this.qrcode } });
			// 		}
			// 	});
			// }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.header {
		flex: 1;
		margin-top: 50rpx;
		align-items: center;
		justify-content: center;
	}

	.main {
		flex: 5;
	}

	.footer {
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		font-weight: bold;
	}

	.position-title {
		margin-top: 60rpx;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.position-count {
		margin-top: 10rpx;
		flex: 6;
		justify-content: center;
		align-items: top;
	}
	.position-count-text {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: 2px solid green;
		color: green;
		border-radius: 50%;
		font-size: 80rpx;
		font-weight: bold;
	}
	.other-info {
		flex: 1;
	}
	.button {
		font-size: 28rpx;
	}
	.qrcode {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
</style>
